<script>
import { defineComponent } from "vue";
import pageData from "@/assets/js/pageData";

export default defineComponent({
  name: "numScreen",
  data() {
    return {
      routeMap : {
          '/zhubian':['1zb'],
          '/breakPage_220':[228],
          'breakPage_500':['500#1']
      }
    };
  },
  props: {
    dir: {
      type: String,
      default: 'top',
      validator(value) {
        return ['top', 'bottom', 'none','left','right'].includes(value)
      }},
    name: {
      type: String
    },
    P: {
      default: null
    },
    Q:{
      default:null
    },
    Ia:{
      default:null
    },
      Ux:{
          default: null
      },
      Ua:{
      default: null
    },
      Ub:{
      default: null
    },
      Uc:{
      default: null
    },
      Uab:{
      default: null
    },
      Ubc:{
      default: null
    },
      Uca:{
        default:null
      },
    path: {
      type: String
    },
    ft_num: {
      type: String
    },
    textWidth: {
      type: [String,Number],
      default: "100"
    },
    numTranX: {
      type: [String,Number],
      default:undefined
    },
    numTranY: {
      type:[String,Number],
      default: undefined
    },
    ftCode: {
      type: [String,Number]
    },
    hasScreen:{
      type: Boolean,
      default: true
    },
      isMother:{
      type: Boolean,
      default: false
    },
    hasUnit:{
      type: Boolean,
      default: true
    }
  },
  methods: {
      getTransform(dir) {
          if (dir === 'none') return
          const [baseX, baseY] = {
              top: [-55, 0],
              left: [-155, 0],
              bottom: [-55, 90]
          }[dir];
          const dx = Number(this.numTranX) ||0
          const dy = Number(this.numTranY) ||0
          return `translate(${baseX + dx},${baseY + dy})`;
    },
    jump() {
        if (!this.ftCode){
            return;
        }
      const path = Object.keys(this.routeMap).find(key =>
        this.routeMap[key].includes(this.ftCode)
      )
      if (!path) {
        console.warn('未找到匹配路径')
        return
      }
      const data=pageData.find(item=>item.ftCode==this.ftCode)
      this.$router.push({
        path,
        query: {
          ftIndex: data.ftIndex,
          jgName: data.jgName,
          ftName: data.ftName
        }
      })
    }
  },
});
</script>

<template>
  <svg>
    <g @click="jump" style="cursor: pointer" transform="translate(40,15)" v-if="hasScreen">
      <rect x='100' y="5" :width="textWidth" height="24" style="stroke:#fff;fill: transparent;stroke-width: 3"/>
      <text
        :x="100 + textWidth / 2"
        y="22"
        text-anchor="middle"
        style="fill: #fff; font-size: 14px;font-family: '宋体';font-weight: 100"
        stroke="#fff"
      >
        {{ name }}
      </text>
    </g>
    <g :transform="getTransform(dir)" v-if="dir !== 'none'">
        <g v-if="!isMother">
            <g v-if="this.Ia!==null">
                <text x="250" y="17" style="fill: rgb(120, 244, 120);font-size: 14px;font-weight: normal">{{ Number(Ia).toFixed(2) }}</text>
                <text x="190" y="17" style="fill: rgb(255,255,255);font-size: 14px;font-weight: normal" v-if="hasUnit">Ia(A)</text>
            </g>

            <g v-if="this.P!==null">
                <text x="250" y="37" style="fill: rgb(255, 255, 255);font-size: 14px;font-weight: normal">{{ Number(P).toFixed(2) }}</text>
                <text x="190" y="37" style="fill: rgb(255,255,255);font-size: 14px;font-weight: normal" v-if="hasUnit">P(MW)</text>
            </g>
            <g v-if="this.Q!==null">
                <text x="250" y="57" style="fill: rgb(255, 255, 255);font-size: 14px;font-weight: normal">{{ Number(Q).toFixed(2) }}</text>
                <text x="190" y="57" style="fill: rgb(255,255,255);font-size: 14px;font-weight: normal" v-if="hasUnit">Q(Mvar)</text>
            </g>
            <g v-if="this.Ux!==null">
                <text x="250" y="77" style="fill: rgb(255, 255, 255);font-size: 14px;font-weight: normal">{{ Number(Ux).toFixed(2) }}</text>
                <text x="190" y="77" style="fill: rgb(255,255,255);font-size: 14px;font-weight: normal" v-if="hasUnit">Ux(kV)</text>
            </g>
        </g>
        <g v-else>
            <g v-if="this.Ua!==null">
                <text x="250" y="17" style="fill: rgb(120, 244, 120);font-size: 14px;font-weight: normal">{{ Number(Ua).toFixed(2) }}</text>
                <text x="190" y="17" style="fill: rgb(255,255,255);font-size: 14px;font-weight: normal" v-if="hasUnit">Ua(kV)</text>
            </g>

            <g v-if="this.Ub!==null">
                <text x="250" y="37" style="fill: rgb(120, 244, 120);font-size: 14px;font-weight: normal">{{ Number(Ub).toFixed(2) }}</text>
                <text x="190" y="37" style="fill: rgb(255,255,255);font-size: 14px;font-weight: normal" v-if="hasUnit">Ub(kV)</text>
            </g>
            <g v-if="this.Uc!==null">
                <text x="250" y="57" style="fill: rgb(120, 244, 120);font-size: 14px;font-weight: normal">{{ Number(Uc).toFixed(2) }}</text>
                <text x="190" y="57" style="fill: rgb(255,255,255);font-size: 14px;font-weight: normal" v-if="hasUnit">Uc(kV)</text>
            </g>
            <g transform="translate(0,60)">
                <g v-if="this.Uab!==null">
                    <text x="250" y="17" style="fill: rgb(120, 244, 120);font-size: 14px;font-weight: normal">{{ Number(Uab).toFixed(2) }}</text>
                    <text x="190" y="17" style="fill: rgb(255,255,255);font-size: 14px;font-weight: normal" v-if="hasUnit">Uab(kV)</text>
                </g>

                <g v-if="this.Ubc!==null">
                    <text x="250" y="37" style="fill: rgb(120, 244, 120);font-size: 14px;font-weight: normal">{{ Number(Ubc).toFixed(2) }}</text>
                    <text x="190" y="37" style="fill: rgb(255,255,255);font-size: 14px;font-weight: normal" v-if="hasUnit">Ubc(kV)</text>
                </g>
                <g v-if="this.Uca!==null">
                    <text x="250" y="57" style="fill: rgb(120, 244, 120);font-size: 14px;font-weight: normal">{{ Number(Uca).toFixed(2) }}</text>
                    <text x="190" y="57" style="fill: rgb(255,255,255);font-size: 14px;font-weight: normal" v-if="hasUnit">Uca(kV)</text>
                </g>
            </g>
        </g>

    </g>


  </svg>

</template>

<style scoped lang="less">

</style>
